<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>异清轩博客文章发布页面</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/nprogress.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
<link rel="shortcut icon" href="images/icon/favicon.ico">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/nprogress.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<!--[if gte IE 9]>
  <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="js/html5shiv.min.js" type="text/javascript"></script>
  <script src="js/respond.min.js" type="text/javascript"></script>
  <script src="js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
  <script>window.location.href='upgrade-browser.html';</script>
<![endif]-->
</head>

<body class="user-select single">
<div id="app">
  <mybody>
    <section class="container">
      <el-form ref="form" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="article.title"></el-input>
        </el-form-item>
        <el-form-item label="封面">
          <upload ref="up" url="upload/titleimg" width="200px" height="150px"></upload>
        </el-form-item>
        <el-form-item label="类别">
          <el-select v-model="article.categoryId" placeholder="请选择">
            <el-option
                    v-for="item in categorys"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select
                  v-model="article.labelArr"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请选择文章标签">
            <el-option
                    v-for="tag in tags"
                    :key="tag.name"
                    :label="tag.name + ':' + tag.nums"
                    :value="tag.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <!-- 加载编辑器的容器 -->
          <script id="container" name="content" type="text/plain"></script>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">发布文章</el-button>
        </el-form-item>
      </el-form>
    </section>
  </mybody>
</div>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/blog.js"></script>
<script src="js/login.js"></script>
<script src="js/upload.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="js/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="js/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
  var ue = UE.getEditor('container');
</script>
<script>
  var v = new Vue({
    el:"#app",
    data:{
      article:{},
      categorys:[],
      tags:[]
    },
    created(){
      axios.get("blog/category/queryAll").then(res=>this.categorys=res.data);
      axios.get("/blog/article/queryLabels").then(res=>{
        for (let tag in res.data) {
          let num = res.data[tag];
          this.tags.push({
            name: tag,
            nums: num
          })
        }
        this.tags.sort((t1,t2)=>t2.nums - t1.nums);
      });
    },
    methods:{
      submit(){
        // 提取上传的图片路径
        this.article.titleImgs = this.$refs.up.path;
        // 提取富文本编辑器里面的内容
        this.article.content = ue.getContent();
        // 将选中的标签数组转成字符串
        this.article.label = this.article.labelArr.join(",");
        axios.post("blog/article/submit", this.article).then(res=>{
          if(res.data.code){
            this.$message(res.data.msg);
          } else {
            this.$alert(res.data.msg);
          }
        })
      }
    }
  })
</script>
</body>
</html>